<!--2019/6/26 18:01. by soft-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js" type="text/javascript"></script>
  <script src="/utils.js"></script>
  <title>断点上传测试</title>
  <style>
    *{margin: 0; padding: 0;}

    .upload-box {
      padding-top: 100px;
      width: 320px;
      text-align: center;
      margin: 0 auto;
    }

    .js-upload {
      border: 2px dashed #999;
      width: 200px;
      height: 80px;
      margin: 10px auto;
      line-height: 80px;
      cursor: pointer;
    }

    .js-tip {
      font-size: 20px;
      color: #666666;
    }

    .js-progress {
      width: 95%;
      margin: 0 auto;
      height: 20px;
      border-radius: 10px;
      border: 1px dashed #a1a1a1;
      background-color: #bfbfbf;
      overflow: hidden;
    }

    .result {
      padding: 10px 0;
      color: #888888;
      text-align: left;
    }
  </style>
</head>
<body>
<div class="upload-box">
  <div class="js-upload">
    <span class="js-tip">点我上传</span>
    <input id="upload" type="file" accept="video/mp4" style="display: none;">
  </div>
  <div class="js-progress"></div>
  <pre class="result"></pre>
</div>

<script>
  var prog = new Progress('.js-progress');

  var once = 1024000; // 一次上传1MB
  var $up = dom('#upload');
  dom('.js-upload').onclick = function (e) {
    $up.click()
  };
  $up.onchange = function (e) {
    var file = e.target.files[0];
    var name = file.name;
    var md5 = fileMd5(file);
    var size = file.size;
    var total = Math.ceil(size / once).toFixed(0);
    dom('.js-upload').innerHTML = name;
    getStats(md5, function (stats) {
      up(stats, total);

      function up(i, total) {
        var start = i * once;
        var end = start + once;
        var blob = file.slice(start, end);
        var fd = new FormData();
        fd.append('file', blob, name);
        fd.append('flag', md5);
        fd.append('stats', i);
        fd.append('total', total);

        var xhr = new XMLHttpRequest();
        xhr.open('post', 'upload', true);
        xhr.onload = function (ev) {
          var data = JSON.parse(xhr.responseText);
          prog.update(data.payload.progress);
          if (data.payload.progress < 1) {
            up(i + 1, total)
          } else {
            var rt = data.payload;
            setInfo(rt)
          }
        };
        xhr.send(fd)
      }
    })
  };

  function getStats(flag, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('post', 'probe', true);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.onload = function (ev) {
      var data = JSON.parse(xhr.responseText);
      if (data.payload.m3u8 != null) {
        prog.update(1);
        setInfo(data.payload)
      } else {
        callback ? callback(data.payload.stats) : null
      }
    };
    xhr.send("flag=" + flag)
  }

  function setInfo(rt) {
    dom('.result').innerHTML = '播放地址：' + rt.video +
            '<br>视频地址：' + rt.m3u8 +
            '<br>视频封面：' + rt.cover +
            '<br>视频标识：' + rt.sign;
  }

  function fileMd5(file) {
    var len = 200;
    var type = file.type;
    var size = file.size;
    var sb = file.slice(0, len);
    var eb = file.slice(size - len);
    return md5(type + size + sb + "_" + eb)
  }
</script>
</body>
</html>